<template>
  <div class="main">
    <!-- css滚动 -->
    <div class="nav">
      <div class="tabs-wrap">
        <!-- 滚动区域,长tab -->
        <div ref="tabListRef" class="tab-list" @click="handleClick">
          <a href="#" v-for="item in tabList" :key="item">{{ item }}</a>
          <div class="line" ref="lineRef"></div>
        </div>
      </div>
      <van-icon name="arrow-down" />
    </div>
    <!-- 使用vant组件实现导航滚动即点击高亮 -->
    <VanScrollTab></VanScrollTab>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VanScrollTab from './components/vanScrollTab.vue'
const tabList = ref([
  '首页',
  '动画',
  '番剧',
  '影视',
  '国创',
  '音乐',
  '舞蹈',
  '游戏',
  '科技',
  '生活',
  '鬼畜',
  '时尚',
  '娱乐',
  '影视',
])
/*
事件委托
点击元素得到offsetLeft=修改色块translate值
加过渡
仅实现向右点击
*/
const tabListRef = ref('')
const lineRef = ref('')
// // 事件处理器
function handleClick(e) {
  const target = e.target
  if (target.tagName === 'A') {
    const offsetLeft = target.offsetLeft
    lineRef.value.style.transform = `translateX(${offsetLeft}px)`
    // adjustScrollPosition(target)
  }
}
// let transformValue = 0
// function adjustScrollPosition(target) {
//   const { clientWidth } = tabListRef.value //可视窗口宽度  335
//   const { scrollWidth } = tabListRef.value //14*60，所有的a 即nav总共长度 840
//   const { offsetWidth } = target
//   const { offsetLeft } = target //点击a标签的距离左侧的距离
//   // 计算需要滚动的距离
//   let scrollDistance = 0
//   // 如果点击的是可视窗口的最后一个标签并且不足以显示下一个标签
//   if (offsetLeft + offsetWidth > clientWidth && offsetLeft + offsetWidth < scrollWidth) {
//     scrollDistance = offsetWidth + 5
//   }
//   transformValue += scrollDistance
//   // 调整滚动位置
//   console.log('transformValue:', transformValue)
//   tabListRef.value.style.transform = `translateX(-${transformValue}px)`
// }
</script>

<style lang="less" scoped>
@baseSize: 3.75vmin; //使用vmin根据屏幕最小适配
.nav {
  font-size: (14 / @baseSize);
  // .flex-justify-between; //使用less混入
  display: flex;
  // align-items: center;
  justify-content: space-between;
  height: (40 / @baseSize); //计算加括号
  background: #fff;
  .tabs-wrap {
    flex: 1;
    overflow: hidden; //多余的不显示
    height: 100%;
    .tab-list {
      position: relative;
      display: flex;
      overflow-x: auto; //css可以实现滚动
      &::-webkit-scrollbar {
        width: 0;
      }
      a {
        padding: 0 (16 / @baseSize);
        line-height: (40 / @baseSize);
        white-space: nowrap;
      }
      .line {
        position: absolute;
        left: (16 / @baseSize);
        bottom: 0;
        width: (28 / @baseSize);
        height: (2 / @baseSize);
        background-color: #fb7299;
        transition: all 0.3s;
      }
    }
  }
  :deep(.van-icon-arrow-down) {
    text-align: center;
    &::before {
      width: (40 / @baseSize);
      height: (40 / @baseSize);
      line-height: (40 / @baseSize);
      background: #fff;
    }
  }
}
</style>
